<template>
  <div class="design-layout">
    <je-tabs
      v-model:activeKey="activeKey"
      hide-add
      type="editable-card"
      class="lauoyt-tabs"
      :tab-bar-gutter="tabBarGutter"
      @edit="onEdit"
    >
      <je-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :closable="pane.closable"
        style="height: 100%"
      >
        <template #tab>
          <span>
            <i :class="pane.icon"></i>
            {{ pane.title }}
          </span>
        </template>
        <div v-if="pane.key == 'tablehome'" class="table-home">
          <board-resource />
        </div>
        <div v-else style="height: 100%">
          <TableDesignIndex
            :tab-key="checkedData.key"
            :product-data="productData"
            :sync-refresh="syncRefresh"
            @changeTabData="changeTabData"
          />
        </div>
      </je-tab-pane>
    </je-tabs>
  </div>
</template>
<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Tabs } from '@jecloud/ui';
  import TableDesignIndex from './index.vue';
  import VueEvent from '../../helper/model/event';
  import BoardResource from '@/views/board-resource/index.vue';
  export default defineComponent({
    name: 'TableDesignLayout',
    components: {
      JeTabs: Tabs,
      JeTabPane: Tabs.TabPane,
      TableDesignIndex,
      BoardResource,
    },
    props: {
      tabdata: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
      syncRefresh: {
        type: Boolean,
        default: true,
      },
    },
    setup(props) {
      const panes = ref([
        {
          title: '首页',
          content: '欢迎来到资源表的世界！',
          key: 'tablehome',
          closable: false,
        },
      ]);
      const activeKey = ref('tablehome');
      const checkedData = ref(props.tabdata);

      //点击左侧树树添加加面板
      watch(
        () => props.tabdata,
        (newVal) => {
          tabPanelOperate(newVal);
        },
      );

      const tabPanelOperate = (newVal) => {
        //关闭所有tabpanel
        if (newVal.type == 'removeAll') {
          panes.value = [
            {
              title: '首页',
              content: '欢迎来到资源表的世界！',
              key: 'tablehome',
              closable: false,
            },
          ];
          activeKey.value = 'tablehome';
          return;
        }

        //是否有重复的数据
        let flag = 'start';
        for (let i = 0; i < panes.value.length; i++) {
          const data = panes.value[i];
          if (data.key == newVal.key) {
            if (newVal.type && (newVal.type == 'delete' || newVal.type == 'update')) {
              flag = i;
            } else {
              flag = false;
            }
            break;
          }
        }
        //不重复
        if (flag) {
          // 删除操作时,面板中没有与之对应的面板则不操作
          if (flag == 'start' && newVal?.type == 'delete') {
            return false;
          }
          //清空和删除表需要关闭tab页
          if (newVal.type && newVal.type == 'delete') {
            panes.value.splice(parseInt(flag), 1);
            // 如果删除的面板是当前激活的面板
            if (activeKey.value == newVal?.key) {
              // 更换激活面板
              activeKey.value = panes.value[panes.value.length - 1].key;
            }
          } else if (newVal.type && newVal.type == 'update') {
            panes.value[flag].title = newVal.title;
          } else {
            panes.value.push(newVal);
            activeKey.value = newVal.key;
          }
          //重复
        } else {
          activeKey.value = newVal.key;
        }
        checkedData.value = newVal;
      };

      const remove = (targetKey) => {
        let lastIndex = 0;
        panes.value.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
        });
        panes.value = panes.value.filter((pane) => pane.key !== targetKey);

        if (panes.value.length && activeKey.value === targetKey) {
          if (lastIndex >= 0) {
            activeKey.value = panes.value[lastIndex].key;
          } else {
            activeKey.value = panes.value[0].key;
          }
        }
        // 取消选中节点
        VueEvent.emit('checkedTreeNode', {
          id: [targetKey],
          checked: false,
        });
      };

      const onEdit = (targetKey) => {
        remove(targetKey);
      };

      const changeTabData = (tabData) => {
        tabPanelOperate(tabData);
      };

      watch(
        () => activeKey.value,
        (val) => {
          if (val != 'tablehome') {
            VueEvent.emit('checkedTreeNode', {
              id: [val],
              checked: true,
            });
          }
        },
      );

      return {
        panes,
        activeKey,
        onEdit,
        num: 2,
        tabBarGutter: 0,
        changeTabData,
        checkedData,
        tabPanelOperate,
      };
    },
  });
</script>
<style lang="less" scoped>
  .design-layout {
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    height: 100%;
    .ant-tabs {
      height: 100%;
      .ant-tabs-content {
        height: 100% !important;
      }
    }
    .lauoyt-tabs {
      .table-home {
        height: 100%;
        overflow: auto;
      }
    }
  }
</style>
<style lang="less">
  .design-layout {
    .lauoyt-tabs {
      .ant-tabs-nav {
        border-top: 1px solid #e6e6e6;
        border-left: 0;
        margin-bottom: 0;
        .ant-tabs-nav-wrap {
          border-bottom: 1px solid #e6e6e6;
        }
      }
      .ant-tabs-content {
        height: 100% !important;
      }
      .ant-tabs-nav-wrap {
        //background: #f7f9fc;
        height: 40px;
      }
      .ant-tabs-nav::before {
        border: 0 !important;
      }
      .je-grid {
        .vxe-table--render-default .vxe-header--column.col--ellipsis,
        .vxe-table--render-default .vxe-body--column.col--ellipsis,
        .vxe-table--render-default .vxe-footer--column.col--ellipsis {
          height: 40px;
        }
      }
      .ant-btn.ant-btn-text:hover {
        color: #3f3f3f;
        background: #d9d9d9 !important;
      }
      .vxe-cell--edit-icon.vxe-icon--edit-outline {
        display: none;
      }
      .ant-btn.ant-btn-text {
        padding: 4px 12px !important;
      }
      .jeicon {
        font-size: 14px !important;
      }
    }
  }
</style>
